<template>
  <div>
    <dialogDiy ref="dialogDiy" :appendToBody="true" title="沟通详情">
      <div style="overflow-y: auto; height: 70vh">
        <div class="msg-title">基本信息</div>
        <div class="msg-content">
          <div class="fx">
            <div class="block f5bg">
              <div class="block-left">客户经理：</div>
              <div class="block-right">{{ detailInfo.managerName ? detailInfo.managerName : '-' }}</div>
            </div>
            <div class="block f5bg">
              <div class="block-left">沟通时间：</div>
              <div class="block-right">{{ detailInfo.createTime ? detailInfo.createTime : '-' }}</div>
            </div>
          </div>
          <div class="fx">
            <div class="block ">
              <div class="block-left">办理业务员：</div>
              <div class="block-right">{{ detailInfo.salesmanName ? detailInfo.salesmanName : '-' }}</div>
            </div>
            <div class="block ">
              <div class="block-left">财务联系人：</div>
              <div class="block-right">{{ detailInfo.financeUser ? detailInfo.financeUser : '-' }}</div>
            </div>
          </div>

          <div class="fx">
            <div class="block f5bg">
              <div class="block-left">注册日期：</div>
              <div class="block-right">{{ detailInfo.registerTime ? detailInfo.registerTime : '-' }}</div>
            </div>
            <div class="block f5bg">
              <div class="block-left">财务联系方式：</div>
              <div class="block-right">{{ detailInfo.financePhone ? detailInfo.financePhone : '-' }}</div>
            </div>
          </div>
          <div class="fx">
            <div class="block ">
              <div class="block-left">基本户：</div>
              <div class="block-right">{{ detailInfo.basicAccount ? detailInfo.basicAccount : '' }}</div>
            </div>
            <div class="block ">
              <div class="block-left">一般户：</div>
              <div class="block-right">{{ detailInfo.normalAccount ? detailInfo.normalAccount : '' }}</div>
            </div>
          </div>

          <div v-for="(it, idx) in detailInfo.shareholderList" :key="idx">
            <div class="fx">
              <div class="block f5bg">
                <div class="block-left">股东 {{ idx + 1 }}：</div>
                <div class="block-right">
                  {{ it.realname ? it.realname : "-" }}
                </div>
              </div>
              <div class="block f5bg">
                <div class="block-left">公司占比：</div>
                <div class="block-right">
                  {{ it.companyRatio ? it.companyRatio : "-" }}
                </div>
              </div>
            </div>
            <div class="fx">
              <div class="block">
                <div class="block-left">个人负债：</div>
                <div class="block-right">
                  {{ it.personalDebt ? it.personalDebt : "-" }}
                </div>
              </div>
              <div class="block">
                <div class="block-left">联系方式：</div>
                <div class="block-right">{{ it.phone ? it.phone : "-" }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="msg-title">客户征信</div>
        <div class="msg-content-row">
          <div class="msg-item">
            <div class="msg-item-left">企业负债：</div>
            <div class="msg-item-right">{{ detailInfo.creditEnterpriseLiability ? detailInfo.creditEnterpriseLiability : '-' }}</div>
          </div>
          <div class="msg-item">
            <div class="msg-item-left">个人负债：</div>
            <div class="msg-item-right">{{ detailInfo.creditIndividualLiability ? detailInfo.creditIndividualLiability : '-' }}</div>
          </div>
          <div class="msg-item">
            <div class="msg-item-left">近三月查询：</div>
            <div class="msg-item-right">{{ detailInfo.creditNearlyMarch ? detailInfo.creditNearlyMarch : '-' }}</div>
          </div>
        </div>
        <div class="msg-title">公司主营</div>
        <div class="msg-content-row">
          <div class="msg-item" v-for="(v, idx) in detailInfo.businessUpstream" :key="idx">
            <div class="msg-item-left">{{`上游 / 价格${idx + 1}`}}：</div>
            <div class="msg-item-right">{{ v.content }}</div>
          </div>
          <div class="msg-item" v-for="(v, idx) in detailInfo.businessDownstream" :key="idx">
            <div class="msg-item-left">{{`下游 / 价格${idx + 1}`}}：</div>
            <div class="msg-item-right">{{ v.content }}</div>
          </div>
        </div>
        <div class="msg-title">补充信息</div>
        <div class="msg-content-row">
          <div class="msg-item">
            <div class="msg-item-left">客户诉求：</div>
            <div class="msg-item-right">{{ detailInfo.customerDemands ? detailInfo.customerDemands : '-' }}</div>
          </div>
          <div class="msg-item">
            <div class="msg-item-left">情况概括：</div>
            <div class="msg-item-right">{{ detailInfo.situationOverview ? detailInfo.situationOverview : '-' }}</div>
          </div>
        </div>
      </div>
    </dialogDiy>
  </div>
</template>
<script>
import dialogDiy from "../../../../components/dialogDiy/index.vue";
import { getCompanyRecordDetail } from '@/api/customer'
export default {
  name: "historyDetail",
  data() {
    return {
      detailInfo: {
        shareholderList: []
      }
    };
  },
  components: {
    dialogDiy
  },
  created() {},
  mounted() {},
  methods: {
    openLog(v) {
      this.getDetail(v.id)
      this.$refs.dialogDiy.openlog();
    },
    getDetail(id) {
      console.log(id);
      getCompanyRecordDetail(id).then(res=> {
        
        res.data.businessUpstream = JSON.parse(res.data.businessUpstream) || []
        res.data.businessDownstream =  JSON.parse(res.data.businessDownstream) || []
        console.log(res.data);
        this.detailInfo = Object.assign({}, res.data)
      })
    }
  }
};
</script>

<style scoped lang="scss">
.msg-title {
  font-size: 14px;
  color: #222;
  padding-left: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.fx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .block {
    width: 48%;
    display: flex;
    align-items: center;
    // max-height: 60px;
    padding: 18px 0;

    //line-height: 56px;
    .block-left {
      display: inline-block;
      //display: flex;
      text-align: right;
      width: 38%;
      white-space: nowrap;
      color: #999;
    }
    .block-right {
      display: inline-block;
      //display: flex;
      line-height: 18px;
      color: #222;
      width: 60%;
    }
  }
}

.f5bg {
  background: #f5f5f5;
}
.msg-content-row {
  .msg-item {
    display: flex;
    margin-bottom: 20px;
    width: 100%;
    .msg-item-left {
      width: 5%;
      text-align: right;
      min-width: 100px;
      margin: 10px 20px;
    }
    .msg-item-right {
      width: 80%;
      background: #f5f5f5;
      border-radius: 4px;
      border: 1px solid #dddddd;
      padding: 14px;
      //width: 30%;
    }
  }
}
</style>
